<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
  构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数

  例：data:function(){}


  在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：
-->
<div id="demo1">
    <app-layout>
        <h1 slot="header">这里可能是一个页面标题</h1>
        <p>主要内容的一个段落。</p>
        <p>另一个主要段落。</p>
        <p slot="footer">这里有一些联系信息</p>
    </app-layout>
</div>
<script type="text/javascript">
    new Vue({
        el:'#demo1',
        components: {
            appLayout:{
                template: '\
                    <div class="container">\
                      <header>\
                        <slot name="header"></slot>\
                      </header>\
                      <main>\
                        <slot></slot>\
                      </main>\
                      <footer>\
                        <slot name="footer"></slot>\
                      </footer>\
                    </div>\
                '
            }
        }
    })
</script>


<div id="demo2">
    <div class="parent">
      <child>
        <template slot-scope="props">
          <div>hello from parent</div>
          <div>{{ props.text }}</div>
          <div>{{ props.aa }}</div>
        </template>
      </child>
    </div>
</div>
<script type="text/javascript">
    var child = {
        template: '\
            <div class="child">\
                <slot text="hello from child" aa="hello from child1"></slot>\
            </div>\
        ',
    };
    new Vue({
        el:"#demo2",
        components:{child:child},
    })
</script>




<div id="demo3">
    <my-awesome-list :items1="items">
        <!-- 作用域插槽也可以是具名的 -->
         <li
            slot="item"
            slot-scope="props"
            class="my-fancy-item">
            {{ props.text }}
        </li>
    </my-awesome-list>
</div>

<script type="text/javascript">
    Vue.component('myAwesomeList',{
        template: '\
            <ul>\
                <slot name="item"\
                    v-for="item in items1"\
                    :text="item.text">\
                </slot>\
            </ul>\
        ',
        props:["items1"],
    });
    var vm = new Vue({
        el:"#demo3",
        data:{
            items: [
                {text:1},
                {text:2},
                {text:3},
                {text:4},
                {text:5},
            ]
        }
    })
</script>
</body>
</html>